<template>
  <section>
    <!--工具条-->
  <!--   <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.search" placeholder="鉴赏ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getUser">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col> --> 

    <!--列表-->
    <template>
      <el-table :data="users" highlight-current-row v-loading="loading" style="margin-top:20px;width: 1001px;">
        <el-table-column prop="realname" label="专家"  width="200">
        </el-table-column>
        <el-table-column prop="price" label="未结算金额" width="300" >
        </el-table-column>
        <el-table-column prop="time" label="上次结算时间" width="200">
        </el-table-column>
        <el-table-column  label="操作" width="300" >
          <template scope="scope">
            <el-button size="small" @click="settleStart(scope.$index,scope.row)">本期结算</el-button>
            <el-button type="primary" size="small" @click="handleEdit(scope.$index,scope.row)">结算记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
      <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
      </el-pagination>
      <div class="all">总计<span class="total">{{total}}</span>条记录</div>
    </el-col>
    <!-- 本期结算 -->
<el-dialog title="本期结算" center :visible.sync="dialogVisible" width="25%" :before-close="handleClose">
  <span>结算金额</span>
  <el-input placeholder="请输入内容" style="margin: 10px 0" v-model="input" clearable>
  </el-input>
<span  style="margin-bottom:10px;display: block;">结算方式</span>
<el-radio-group v-model="radio">
    <el-radio :label="1">现金</el-radio>
    <el-radio :label="2">转账到银行卡</el-radio>
    <el-radio :label="3">工具转账(微信、支付宝)</el-radio>
    <el-radio :label="4">其他方式</el-radio>
</el-radio-group>
<span  style="margin:10px 0;display: block;">结算凭证</span>
<el-upload
  class="avatar-uploader" 
  :action="path"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img style='border: 1px dashed #d9d9d9;' v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<span style="margin-top:10px;display: block;">上传凭证</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancelSettlement">取 消</el-button>
    <el-button type="primary" @click="confirmSettlement">确 定</el-button>
  </span>
</el-dialog>
  </section>
</template>
<script>
  import { sendData,cutString,baseURL } from "../../api/api";
  export default {
    data() {
      return {
        filters: {
          search: ''
        },
        loading: false,
        users: [
        ],
        total: 0,
        page: 1,
        dialogVisible: false,
        input:"",
        exportId:"",
        radio: 0,
        // action='http://192.168.5.101:8080/portal/system/springUpload'
        // path:"http://192.168.5.101:8080/portal/system/springUpload",
        path:baseURL+"system/springUpload",
        imageUrl: ''
      }
    },
    methods: {
      //获取专家记录
      getUser: function () {
        let page=JSON.parse(this.page);
        let params=sendData({url: "profit/unexpend",msg: {pgNo:page,num:20}})
        this.loading = true;
        this.$http.get(params.baseURL,{params:params.params}).then(res=>{
          console.log(res)
          var res=cutString(res.bodyText)
          // this.id=res.msg.profitUnexpendRspList[1].exportId
          this.total=res.msg.total
          this.users = res.msg.profitUnexpendRspList
          res.msg.profitUnexpendRspList.map(function(v,i){
            v.time=v.time.slice(0,19)
            v.price=(v.price/100).toFixed(2)
          })
          this.loading = false;
          console.log(res)
        })
      },
      // 分页请求
      handleCurrentChange(val) {
        console.log(val)
        this.page = val;
        this.getUser();
      },
  
        //本期结算X关闭
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.radio=0
            this.imageUrl=""
            done();

          })
          .catch(_ => {});
      },
      // 本期结算弹窗
      settleStart(index,row){
        this.dialogVisible = true
        this.input=row.price,
        this.exportId=row.exportId
      },
      // 图片上传
       handleAvatarSuccess(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        this.imageUrl=res.msg.path
        console.log(this.imageUrl)
      },

      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        // return isJPG && isLt2M;
      },
      // 本期结算取消
      cancelSettlement(){
        this.dialogVisible = false,
        this.radio=0,
        this.imageUrl=''
      },
    // 本期确认结算提交后台
      confirmSettlement(){
        var type=this.radio
        if (type==0) {
           this.$message({
              message: "请选择结算方式",
              type: "error"
            });
           return
        }
        this.dialogVisible = false
        let params=sendData({url: "profit/balance",msg: {exportId:this.exportId,type:type,path:this.imageUrl,count:this.input*100}})
        this.$http.get(params.baseURL,{params:params.params}).then(data=>{
          var res=cutString(data.bodyText)
          if (res.desc=="SUCCESS") {
            this.getUser()
            this.$message({
              message: "结算成功",
              type: "success"
            });
          }
          // this.$router.replace('/settlement')
        })
      },

      //查看专家以往结算记录
      handleEdit: function (index,row) {
         this.$router.push({  
            path: '/accountRecord',   
            name: '结算记录',  
            params: {   
                id: row.exportId,   
            }   
        })
      }
    },
    created(){
     
    },
    mounted() {
      this.getUser();
    }
  };

</script>

<style scoped>
.all{
  font-size: 16px;
  line-height: 32px;
  color: #666
}
.total{
    padding:0 5px;
    color: #52BAE9;
  }

.avatar-uploader .el-icon-plus {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>